<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_setting.bindEmail }}</view>
				<view></view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="u-m-t-20">
			<view style="padding: 0 40rpx;">
				<view
				class="item-card u-f-32 u-lh-44 flex-center"
				style="color: #404040;">
					<input
					 v-model="form.email"
					 :placeholder="lang_first.emailTips"
					 style="width: 100%;"
					 />
				</view>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<view style="padding: 0 40rpx;">
				<view class="item-card u-f-32 u-lh-44 flex-center-between">
					<input
					v-model.number="form.code"
					type="number"
					style="width: 100%"
					:placeholder="lang_first.codeTips"/>
					
					<view
					class="color-danger clear-flex"
					@click="getCode"
					>{{ codetips || lang_first.getCode }}</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<x-fixed-bottom
		background="rgba(0,0,0,0)">
			<view class="flex-center-center u-lh-42 font-medio u-p-b-90">
				<x-common-btn background="#FD1E43">{{ lang_common.done }}</x-common-btn>
			</view>
		</x-fixed-bottom>
		
		<!-- 验证码控件 -->
		<u-verification-code
		:seconds="seconds"
		:start-text="lang_first.getCode"
		:end-text="lang_first.twiceCode"
		:change-text="`X${ lang_unit.seconds }`"
		ref="uCode" 
		@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import areacodeObj from '@/utils/areacode.js'
	let list = areacodeObj.list || []
	export default {
		data() {
			return {
				areacode: list[0],
				
				seconds: 60,
				codetips: '',
				
				form: {
					email: '',
					code: ''
				}
			}
		},
		created() {

		},
		methods: {
			// 选择国际区号
			changeAreacode() {
				uni.navigateTo({
					url: '/pages/other/areacode/areacode',
					events: {
						change: (e) => {
							this.areacode = { ...e }
						}
					},
					success: res => {
						res.eventChannel.emit('areacode-page')
					}
				})
			},
			// 获取验证码
			getCode() {
				let reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
				if (!this.form.email) {
					return this.$api.msg(this.lang_first['emailTips'])
				} else if (!reg.test(this.form.email)) {
					return this.$api.msg(this.lang_first['emailErrorTips'])
				}
				if(this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
				}
			},
			// 验证码变化后触发
			codeChange(e) {
				this.codetips = e
			},
			// 提交表单
			submitAction() {
				// 空值处理
				let form = this.form
				
				let { phoneNumberTips, codeTips } = this.lang_first
				for (let key in form) {
					if (!form[key]) {
						this.$api.msg(this.lang_first[key + 'Tips'])
						return;
					}
				}
				
				// 请求登录接口
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-card {
		padding: 26rpx 34rpx;
		background-color: #F9F9F9;
	}
</style>
